<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax卖座网渲染</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="../AJax实现卖座网渲染/js/swiper-4.4.1/dist/css/swiper.css">
    <script src="./js/swiper-4.4.1/dist/js/swiper.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/封装Ajax.js"></script>
</head>
<body>
    <div id="Box">
        <!--  头部标题栏 -->
        <div class="topTitle">
            <div class="topTitle_left">
                <div class="topTitle_left_ImgBox">
                    <img src="./img/列表.png" alt="" style="margin-top: 18px;">
                </div>
                <div class="topTitle_left_titleBox">
                   	 卖座电影
                </div>
            </div>
            <div class="topTitle_right">
                <div class="topTitle_right_liebiao">
                    <span>深圳</span>
                    <img src="./img/箭头 下.png" alt="" width="25%" height="25%">
                </div>
                <div class="topTitle_right_user">
                    <img src="./img/我的.png" alt="" width="35%" height="30%">
                </div>
            </div>
        </div>

        <!-- 左侧导航栏 -->
        <div class="leftNav">
            <ul class="leftNav_ul">
                <li>
                    <a href="Ajax卖座网渲染.html">
                        <span>首页</span>
                        <span><img src="./img/更多.png" alt=""></span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>影片</span>
                        <span><img src="./img/更多.png" alt=""></span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>影院</span>
                        <span><img src="./img/更多.png" alt=""></span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>商城</span>
                        <span><img src="./img/更多.png" alt=""></span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>我的</span>
                        <span><img src="./img/更多.png" alt=""></span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>卖座卡</span>
                        <span><img src="./img/更多.png" alt=""></span>
                    </a>
                </li>
            </ul>
        </div>

        <!-- 主体内容 -->
        <div class="contentBox">
            <!-- 轮播图 -->
            <div class="bannerBox">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="../AJax实现卖座网渲染/img/卖座网首页轮播图.jpg" alt="" width="100%" height="100%"></div>
                        <div class="swiper-slide"><img src="../AJax实现卖座网渲染/img/卖座网首页轮播图.jpg" alt="" width="100%" height="100%"></div>
                        <div class="swiper-slide"><img src="../AJax实现卖座网渲染/img/卖座网首页轮播图.jpg" alt="" width="100%" height="100%"></div>
                    </div>
                </div>
            </div>

            <!-- 主信息 -->
            <div class="contenerBox">
                <ul class="contenerBox_ul"></ul>
                <ul class="contenerBox_ul contenerBox_ulTwo"></ul>
                <ul class="contenerBox_ulThree" style="display: none">
                    <div class='nav'>
                        <span class='zzsy' id='active'>正在热映</span>
                        <span class='jjsy'>即将上映</span>
                    </div>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>